<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button id="In">点击淡入 div 元素。</button>
<button id="out">点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<script>
    $('#In').click(function () {
        $('#div1').fadeIn();
        $('#div2').fadeIn(2000);
        $('#div3').fadeIn(3000);
    });
    $('#out').click(function () {
        $('#div1').fadeOut(3000);
        $('#div2').fadeOut(2000);
        $('#div3').fadeOut();
    });
</script>

</body>

</html>